<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资讯管理</title>
    <style>
        /* --- 全局和基础样式 --- */
        :root {
            --sidebar-width: 240px;
            --primary-color: #007bff;
            --info-color: #17a2b8;
            --danger-color: #dc3545;
            --light-gray: #f8f9fa;
            --border-color: #dee2e6;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f4f5f7;
            margin: 0;
            color: #333;
        }

        /* --- 主要布局 --- */
        /* 模拟的侧边栏样式 */
        .teacher-sidebar-placeholder {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: var(--sidebar-width);
            background-color: #fff;
            box-shadow: 2px 0 5px rgba(0,0,0,0.05);
            z-index: 1000;
            padding: 20px;
            box-sizing: border-box;
            border-right: 1px solid #e9ecef;
        }
        .teacher-sidebar-placeholder h3 { margin-top: 0; color: var(--primary-color); }
        .teacher-sidebar-placeholder ul { list-style: none; padding: 0; }
        .teacher-sidebar-placeholder li a { display: block; padding: 10px; text-decoration: none; color: #333; border-radius: 4px; }
        .teacher-sidebar-placeholder li a:hover { background-color: #f1f1f1; }


        .main-content {
            margin-left: var(--sidebar-width);
            padding: 30px;
        }

        .container-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 25px 30px;
        }

        /* --- 页面头部与功能区 --- */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            flex-wrap: wrap; /* 在小屏幕上换行 */
        }
        .page-header h2 {
            margin: 0;
            font-size: 1.8em;
        }

        .search-form {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
        }

        .search-form input[type="text"] {
            flex-grow: 1;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 1em;
        }
        .search-form input[type="text"]:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }

        /* --- 表格样式 --- */
        .table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95em;
        }

        .table th, .table td {
            padding: 12px 15px;
            text-align: left;
            vertical-align: middle;
            border-bottom: 1px solid var(--border-color);
        }

        .table thead th {
            background-color: var(--light-gray);
            font-weight: 600;
            color: #495057;
        }

        .table tbody tr:nth-child(even) {
            background-color: var(--light-gray);
        }

        .table tbody tr:hover {
            background-color: #e9ecef;
        }

        .info-thumbnail {
            max-width: 120px;
            height: auto;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* --- 按钮统一样式 --- */
        .btn {
            display: inline-block;
            font-weight: 500;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 8px 15px;
            font-size: 0.9em;
            border-radius: 4px;
            transition: all 0.2s ease-in-out;
            text-decoration: none;
            color: #333;
        }
        .btn:hover { text-decoration: none; filter: brightness(95%); }

        .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }
        .btn-info { background-color: var(--info-color); border-color: var(--info-color); color: #fff; }
        .btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); color: #fff; }

        /* 表格内的操作按钮间距 */
        .table .btn { margin-right: 5px; }

    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}">
    <div class="teacher-sidebar-placeholder">
        <h3>教师后台</h3>
        <ul>
            <li><a href="#">仪表盘</a></li>
            <li><a href="#" style="background-color: #e9ecef; font-weight: bold;">资讯管理</a></li>
            <li><a href="#">学生管理</a></li>
            <li><a href="#">个人设置</a></li>
        </ul>
    </div>
</div>

<div class="main-content">
    <div class="container-card">
        <div class="page-header">
            <h2>我的资讯管理</h2>
            <a href="/info/add" class="btn btn-primary">发布新资讯</a>
        </div>

        <form th:action="@{/info/manage}" method="get" class="search-form">
            <input type="text" name="keyword" placeholder="根据标题或ID进行搜索..." th:value="${keyword}">
            <button type="submit" class="btn">搜索</button>
        </form>

        <table class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>封面图</th>
                <th>标题</th>
                <th>发布时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:if="${#lists.isEmpty(infoList)}">
                <td colspan="5" style="text-align: center; padding: 40px 0;">您尚未发布任何资讯。</td>
            </tr>
            <tr th:each="info : ${infoList}">
                <td th:text="${info.id}">101</td>
                <td>
                    <img th:if="${info.infoImage != null and info.infoImage != '/images/default-info.png'}"
                         th:src="@{${info.infoImage}}"
                         alt="资讯封面" class="info-thumbnail">
                    <span th:unless="${info.infoImage != null and info.infoImage != '/images/default-info.png'}">无图</span>
                </td>
                <td th:text="${info.infoTitle}">一个示例资讯标题</td>
                <td th:text="${#temporals.format(info.createTime, 'yyyy-MM-dd HH:mm')}">2025-06-16 10:30</td>
                <td>
                    <a th:href="@{/info/edit/{id}(id=${info.id})}" class="btn btn-info">编辑</a>
                    <form class="delete-form" th:action="@{/info/delete/{id}(id=${info.id})}" method="post" style="display:inline;">
                        <button type="submit" class="btn btn-danger">删除</button>
                    </form>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 现代化删除确认提示
        const deleteForms = document.querySelectorAll('.delete-form');
        deleteForms.forEach(form => {
            form.addEventListener('submit', function(event) {
                // 从表单中获取资讯标题或ID，让提示更具体
                const row = form.closest('tr');
                const title = row.querySelector('td:nth-child(3)').innerText;
                const message = `确定要删除资讯 "${title}" 吗？此操作不可恢复。`;

                if (!confirm(message)) {
                    event.preventDefault(); // 如果用户点击“取消”，则阻止表单提交
                }
            });
        });
    });
</script>

</body>
</html>